<template>
  <div :style="{height:height,width:width}" />
</template>
<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons')
import resize from './mixins/resize'
const animationDuration = 3000
export default {
  mixins: [resize],
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    factoryState: {
      type: Array,
      default:()=>{
        return []
      }
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      const data = this.factoryState.map(val=>({
        name:val.factoryArea,
        value:val.useFactoryCount
      }))
      this.chart = echarts.init(this.$el, 'macarons')
      let myChart = this.chart
      this.chart.setOption(
          {
            color: ['#6698FF','#1F45FC','#82CAFF','#43BFC7','#C36241'],
            tooltip: {
              trigger: 'item',
              axisPointer: {
                type: 'shadow'
              },
              textStyle:{
                color:'#fff'
              }
            },
            grid: {
              top: 30,
              left: '2%',
              right: '2%',
              bottom: '3%',
              containLabel: true
            },
            series: [
              {
                name: '厂区统计',
                animationDuration,
                type: 'pie',
                center: ['50%', '50%'],
                radius: ['50%', '60%'],
                label: {
                  alignTo: 'edge',
                  formatter: '{a|{d}%} {b|{c}} \n{c|{b}}',
                  minMargin: 5,
                  edgeDistance: 15,
                  lineHeight: 20,
                  rich: {
                    a: {
                      fontSize: 15,
                      color: '#000000'
                    },
                    b: {
                      fontSize: 15,
                      color: '#000000'
                    },
                    c: {
                      fontSize: 14,
                      color: '#999'
                    }
                  }
                },
                labelLine: {
                  length: 50,
                  length2: 0,
                  maxSurfaceAngle: 2,
                  lineStyle:{
                    color: '#999'
                  }
                },
                labelLayout: function (params) {
                  const isLeft = params.labelRect.x < myChart.getWidth() / 2;
                  const points = params.labelLinePoints;
                  points[2][0] = isLeft
                      ? params.labelRect.x
                      : params.labelRect.x + params.labelRect.width;
                  return {
                    labelLinePoints: points
                  };
                },
                data,
                itemStyle: {
                  borderColor: '#fff',
                  borderWidth: 2,
                },
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              },
              {
                center: ['50%', '50%'],
                type: 'gauge',
                startAngle: 270,
                endAngle: -89.9999,
                axisTick: {
                  show: false,
                  length: 1,
                },
                axisLabel: {
                  show: false,
                },
                radius: '80%',
                splitNumber: '200',
                axisLine: {
                  show: false
                },
                splitLine: {
                  length: 3,
                  lineStyle: {
                    width: 1,
                    color: '#1589FF',
                  },
                },
                detail: {
                  show: false,
                },
              },
              {
                center: ['50%', '50%'],
                type: 'gauge',
                startAngle: 270,
                endAngle: -89.9999,
                axisTick: {
                  show: false,
                  length: 1,
                },
                axisLabel: {
                  show: false,
                },
                radius: '90%',
                splitNumber: '200',
                axisLine: {
                  show: false
                },
                splitLine: {
                  length: 3,
                  lineStyle: {
                    width: 1,
                    color: '#B6B6B4',
                  },
                },
                detail: {
                  show: false,
                },
              },
            ],
          }
      )
    }
  }
}
</script>
